<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单列表</title>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all">

		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script src="../../js/jquery3.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<style type="text/css">
		body{
			overflow-y: hidden;
		}
		#dv {
			background-color: white;
			width: 96%;
			margin: 20px 20px auto;
		}

		.add_tb {
			width: 26px;
			height: 26px;
			margin: 0 0 0 10px;
		}


		td .layui-form-select{
			margin-top: -10px;
			margin-left: -15px;
			margin-right: -15px;
		}
	</style>

	<body bgcolor="whitesmoke">

		<div id="dv">
			<br>
			&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list" style="width: 150px;height: 100px;"><b>订单管理</b></i>
			<br><br>
		</div>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<div id="toolBar" style="display: none;">
			<div class="layui-btn-group">
				<button type="button" class="add_tb " lay-event="add"><i class="layui-icon">&#xe654;</i></button>
			</div>
		</div>

		<!--每一行后面的删除和修改按钮-->
		<div style="display: none" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="singleEdit">保存</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="singleDel">删除</a>
		</div>

	</body>

	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script type="text/javascript">
		$(function() {
			$.post("/user/getSelf", {}, function(data) {
				if (data.u_id != 0) {
					layui.use('table',function() {
						var table = layui.table;
						var layer = layui.layer;
						table.render({
							elem: '#test',
							url: '/order/findAll',
							method: 'post',
							page: {
								limits: [5, 10, 15, 20],
								limit: 5,
								theme: '#5FB878',
							},
							where: {
								uid: data.u_id,
							},
							toolbar: '#toolBar', //开启头部工具栏，并为其绑定左侧模板								
							defaultToolbar: ['filter', 'exports','print'],
							title: '订单数据表',
							cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增							
							cols: [
								[{
									title: '序号',
									type: "numbers",
								}, {
									type: 'orId',
									title: 'id',
									hide: true
								}, {
									title: '产品名称',
									templet: function(data) {
										return data.product.prName;
									}
								}, {
									field: 'orNumber',
									title: '单号',
								}, {
									field: 'orCreateDate',
									title: '开单日期',
									width: 180,
									sort: true,

								}, {
									title: '交货状态',
									templet: function(data) {
										var htm ="";
										if(data.orStatus=="未交货") {
											htm = '<select name="editStateS" lay-filter="editStateS" id="editStateS" class="from">' +
													'<option value="未交货">未交货</option>' +
													'<option value="已交货">已交货</option>'
										}else if (data.orStatus=="已交货"){
											htm = '<select name="editStateS" lay-filter="editStateS" id="editStateS" class="from">' +
													'<option value="已交货">已交货</option>'+
													'<option value="未交货">未交货</option>'
										}else {
											htm = '<select name="editStateS" lay-filter="editStateS" id="editStateS" class="from">' +
													'<option></option>'+
													'<option value="已交货">已交货</option>'+
													'<option value="未交货">未交货</option>'
										}
										htm += '</select>'
										return htm
									},
									width: 150,

								}, {
									field: 'orNum',
									title: '数量'
								}, {
									title: '单价',
									templet: function(data) {
										return data.product.prPrice;
									}
								}, {

									title: '金额',
									sort: true,
									templet: function(data) {
										return (data.orNum * data.product.prPrice).toFixed(2);
									}
								}, {
									field: 'orPrincipal',
									title: '负责人'
								}, {
									field: 'orTarget',
									title: '收货单位'
								}, {
									fixed: 'right',
									title: '操作',
									toolbar: '#barDemo'
								}]]
								,done: function (res, curr, count) {
							//数据渲染完的回调。
							//由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
							$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); }

					});

						//监听每一行的操作
						table.on('tool(test)', function(obj) {
							var tr = obj.tr;
							var data2 = obj.data;
							if (obj.event == "singleEdit") {

								let val = tr.find("#editStateS").val();

								layer.confirm("是否保存？", {
											icon: 3, title: '提示',btn:['保存','取消'] ,	btn1: function (index) {
												$.post("/order/updateOrder", {
													"uId": data.u_id,
													"orId": data2.orId,
													"orStatus": val
												}, function (res) {
													if (res == "success") {

														layer.msg('保存成功', {icon: 6});
														layer.close(index);
													}
												})
											}
										,
									btn2: function(index){
										layer.close(index);
									location.reload();
								}
								})


							}else if(obj.event =="singleDel"){
								layer.confirm("真的删除吗？",function(index){
									$.post("/order/delOrder",{"uId":data.u_id,"orId":data2.orId},function(res){
										if (res=="success") {

											layer.msg('删除成功', {icon: 1});
											obj.del();
											layer.close(index);
										}
									})
								})

							}
						});


						//头工具栏事件
						table.on('toolbar(test)', function(obj) {
							switch (obj.event) {
								case 'add':
									layer.open({
										type:2,
										title:'添加信息',
										shadeClose:true,
										shade:0.8,
										area:['700px','600px'],
										shadeClose:false,
										content:'add_orders.html?uid='+data.u_id,
									})
									break;
							}	
						
						});
					});

				} else {
					alert("未登录，请先登录")
					location.href = "../login/login.html"
				}
			})
		})
	</script>
</html>
